<template>
    <div class="jx-content">
        <el-form id="yform"  label-width="100px" :rules="rules" :model="form" ref='form' v-if="editor==false && id">
            <el-form-item label="课程名称：" prop="name" >
                <el-input v-model="form.name" :disabled="!infoFlag" placeholder="请输入课程名称"  maxlength="20" @input="dataInput2"></el-input>
                <p style="position:absolute;  left:260px; top: 12px; color:#bbbbbb"> {{form.num}}/20</p>
            </el-form-item>
            <el-form-item label="课程类型：" prop="type" v-if="!internetStatus">
                <el-select v-model="form.type" placeholder="请选择课程类型" :disabled="!infoFlag">
                    <el-option label="核心课程" value="核心课程"></el-option>
                    <el-option label="扩展课程" value="扩展课程"></el-option>
                </el-select>
            </el-form-item>
            <div>
                <span class="label" style="margin:6px 0 0px -4px"><span style="color:#F56C6C">*</span> 课程图标：</span>
                <div class="tap">
                    <i @click="leftArrow" class="iconfont icon-xiangzuo-copy leftArrow"></i>
                    <i @click="rightArrow" class="iconfont icon-xiangyou rightArrow"></i>
                    <div class="tapBox">
                            <ul class="tapThrough">
                                <li v-for="(item,index) in form.arrlist" :key="index"  @click='choose(item.id)'>
                                    <img :src="item.keyValuePath" />
                                    <i  :class="{'icons':item.id==isActive}"></i>
                                </li>
                            </ul>
                    </div>
                </div>
            </div>
            <div class="repeatInfo">
                <div style="float:right">
                     <el-button class="button-style" @click="infoFlag=true"  v-if="infoFlag==false" >修改基本信息</el-button>
                     <el-button class="button-style" @click="infoFlag=false" v-if="infoFlag==true">取消基本信息</el-button>
                </div>
                <p class="tips-name">注：修改课程基本信息，视为本人重新创建课程</p>
            </div>
            <div class="clear-fix"></div>
            <el-form-item label="课程简介：">
                <el-input type="textarea" v-model="form.desc" maxlength="200" @input="dataInput"  :disabled="!infoFlag"></el-input>
                <p style="position:absolute;  left: 820px; top: 180px;font-size:12px;color:#bbbbbb"> {{form.titnum}}/200</p>
            </el-form-item>
            <div class="footer">
                <el-button class="button-style saveBtn" @click="onSubmit('form')" :disabled="!infoFlag" >保存</el-button>
            </div>
        </el-form>
        <!-- 正常进入 -->
         <el-form id="yform"  label-width="100px" :rules="rules" :model="form" ref='form' v-else>
            <el-form-item label="课程名称：" prop="name" >
                <el-input v-model="form.name"  placeholder="请输入课程名称"  maxlength="20" @input="dataInput2"></el-input>
                <p style="position:absolute;  left:260px; top: 12px;font-size:12px;color:#bbbbbb"> {{form.num}}/20</p>
            </el-form-item>
            <el-form-item label="课程类型：" prop="type" v-if="!internetStatus">
                <el-select v-model="form.type" placeholder="请选择课程类型" >
                    <el-option label="核心课程" value="核心课程"></el-option>
                    <el-option label="扩展课程" value="扩展课程"></el-option>
                </el-select>
            </el-form-item>
            <div>
                <span class="label" style="margin:6px 0 0px -4px"><span style="color:#F56C6C">*</span> 课程图标：</span>
                <div class="tap">
                    <i @click="leftArrow" class="iconfont icon-xiangzuo-copy leftArrow"></i>
                    <i @click="rightArrow" class="iconfont icon-xiangyou rightArrow"></i>
                    <div class="tapBox">
                            <ul class="tapThrough">
                                <li v-for="(item,index) in form.arrlist" :key="index" @click='choose(item.id)'>
                                    <img :src="item.keyValuePath" />
                                    <i  :class="{'icons':item.id==isActive}"></i>
                                </li>
                            </ul>
                    </div>
                </div>
            </div>
            <div class="clear-fix"></div>
            <el-form-item label="课程简介：">
                <el-input type="textarea" v-model="form.desc" maxlength="200" @input="dataInput" ></el-input>
                <p style="position:absolute;  left: 820px; top: 180px;font-size:12px;color:#bbbbbb"> {{form.titnum}}/200</p>
            </el-form-item>
            <div class="footer">
                <el-button class="button-style saveBtn" @click="onSubmit('form')"  >保存</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //角色
                roleId:'',
                //存储课程名称
                CourseTitle:'',
                //添加接到id值
                val:'',
                //按钮
                infoFlag:false,
                //存储id
                id: '',
                form: {
                    name: '',
                    type: '',
                    desc: '',
                    //字数初始化
                    titnum:200,
                    num:20,
                    arrlist:[],
                },
                isActive:'',
                num:0,

                rules:{
                    name: [
                        { required: true, message: '请输入课程名称', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择课程类型', trigger: 'blur' }
                    ]
                },
                //控制按钮
                editor:'' ,

                // 判断是知否是互联网状态
                internetStatus: ''
            }
        },
        created() {
            this.imgShow()
            //好使的
            this.id = this.$localstorage.getLocalStorage('setCourseId')
            this.roleId=this.$store.state.user.roles[0]
            if(this.id){
               this.init()
               this.Flag()
            }else{
               // this.$localstorage.putLocalStorage('courseFlag', true)
               this.$parent.chaperFlag=true
            }

            // 判断是否是互联网账号
            this.internetInit()
        },
        methods: {
            // 判断是否是互联网账号
            internetInit() {
                let self = this
                self.$http.get('/tes/unauthorized/internet').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.internetStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            imgShow(){
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=courseIcon') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.form.arrlist = res.data.courseIcon
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
            },
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.id) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.form.name = res.data.name
                       self.form.type = res.data.typeName
                       self.form.desc = res.data.introduction
                       self.form.titnum = 200-(res.data.introduction).length
                       self.form.num = 20-(res.data.name).length
                       self.isActive =  res.data.icon
                       self.editor = res.data.ownCourse
                        for (var i = 0; i <  self.form.arrlist.length; i++) {
                           if (self.form.arrlist[i].id === self.isActive) {
                                self.form.arrlist.unshift(self.form.arrlist[i]);
                                self.form.arrlist.splice(i+1, 1);
                                break
                           }
                        }
                    }else{
                         self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })

            },
            //获取章节是否有值
            Flag(){
                let self = this
                // console.log(this.id,878)
                self.$http.get('/tes/course/'+ self.id+'/chapter/list/owner').then((response) => {
                let res = response.data
                if(res.code == '200') {
                    //已经有章节,判断导航显示
                      this.$parent.mark=false
                      this.$parent.chaperFlag=false
                }else if(res.code == '404'){
                    //暂无章节,判断导航显隐藏
                      this.$parent.mark=true
                      this.$parent.chaperFlag=false
                }
                }).catch(err => {
                     self.$message.error(res.message)
                })
            },
             //保存
            onSubmit(form){
                let self = this
                if(self.id){  //编辑
                    //console.log(self.id)
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                            let data = {}
                            if(self.internetStatus){
                                data = {
                                    icon: self.isActive,
                                    introduction:self.form.desc,
                                    name:self.form.name
                                }
                            }else{
                                data = {
                                    icon: self.isActive,
                                    introduction:self.form.desc,
                                    name:self.form.name,
                                    typeName: self.form.type
                                }
                            }
                            self.$http.put('/tes/course/'+self.id, data).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                    self.isShow = true
                                    if(self.roleId =='TEACHER' || self.roleId == 'MARKET_TEACHER' ||  self.roleId == 'UNIVERSITY_TEACHER'){ //是教师
                                    self.$router.push({
                                            path:'/Teaching/Course/CreativeCourse/ChapterInfo'
                                        })
                                    }else if(self.roleId =='SUPER_ADMIN' || self.roleId =='INTERNET_ADMIN'){   //管理员
                                        self.$router.push({
                                            path:'/Admin/CreativeCourse/ChapterInfo'
                                        })
                                    }
                                    self.$localstorage.putLocalStorage('CourseTitle', self.form.name) //存储课程名称
                                    self.$parent.chaperFlag=false

                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    })
                }else if(!self.id){   //添加
                    if(self.form.isActive==''){
                        self.$message({
                            message: '课程图标不能为空',
                            type: 'warning'
                        })
                        return
                    }
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                            const loading = this.$loading({
                                lock: true,
                                text: '正在保存中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                            let data = {}
                            if(self.internetStatus){
                                data = {
                                    icon: self.isActive,
                                    introduction:self.form.desc,
                                    name:self.form.name
                                }
                            }else{
                                data = {
                                    icon: self.isActive,
                                    introduction:self.form.desc,
                                    name:self.form.name,
                                    typeName: self.form.type
                                }
                            }
                            self.$http.post('/tes/course',data).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    self.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                if(self.roleId =='TEACHER' || self.roleId == 'MARKET_TEACHER' ||  self.roleId == 'UNIVERSITY_TEACHER'){ //是教师
                                    self.$router.push({
                                            path:'/Teaching/Course/CreativeCourse/ChapterInfo'
                                        })
                                    }else if(self.roleId =='SUPER_ADMIN' || self.roleId =='INTERNET_ADMIN'){   //管理员
                                        self.$router.push({
                                            path:'/Admin/CreativeCourse/ChapterInfo'
                                        })
                                    }
                                    self.val = res.data
                                    //好使的
                                    self.isShow = true
                                    self.$localstorage.putLocalStorage('CourseTitle', self.form.name)
                                    self.$localstorage.putLocalStorage('setCourseId', self.val)
                                    self.$parent.chaperFlag=false
                                    self.$refs[form].resetFields();
                                    loading.close()
                                } else{
                                    self.$message.error(res.message)
                                    loading.close()

                                }
                            }).catch(err => {
                                self.$message.error(res.message)
                                loading.close()
                            })
                        }
                    })
                }
            },
            rightArrow(){
                // if(this.infoFlag==false){
                let self =this
                if(this.editor == false){
                    if(self.infoFlag==false && self.id !=''){
                        return false  //禁止点击
                    }else if(self.infoFlag==true){
                        this.num++;
                        if(this.num >= Math.ceil($(".tapThrough").children("li").length / 4)) {
                            this.num = 0;
                        }
                        $(".tapThrough").css("top", (-1 * this.num * 100) + "px");
                    }
                }
                this.num++;
                if(this.num >= Math.ceil($(".tapThrough").children("li").length / 4)) {
                    this.num = 0;
                }
                $(".tapThrough").css("top", (-1 * this.num * 100) + "px");
            },
            leftArrow(){
                let self =this
                if(this.editor == false){
                    if(self.infoFlag==false && self.id !=''){
                        return false  //禁止点击
                    }else if(self.infoFlag==true ){
                         this.num--;
                        if(this.num < 0) {
                            this.num = Math.ceil($(".tapThrough").children("li").length / 4) - 1;
                        }
                        $(".tapThrough").css("top", (-1 * this.num * 100) + "px");
                    }
                }
                this.num--;
                if(this.num < 0) {
                    this.num = Math.ceil($(".tapThrough").children("li").length / 4) - 1;
                }
                $(".tapThrough").css("top", (-1 * this.num * 100) + "px");

            },
            // onSubmit() {
            //    this.$store.commit('initCartCount',this.id)
            //   window.sessionStorage.setItem('initCartCount',2)
            //     this.$router.push({
            //         path: '/Teaching/Course/CreativeCourse/ChapterInfo',
            //         query:{id:this.id}

            //     })

            //   },
            //信息字数
            dataInput(){
                var txtVal = this.form.desc.length;
                this.form.titnum = 200 - txtVal
            },
            //信息字数
            dataInput2(){
                var txtVal = this.form.name.length;
                this.form.num = 20 - txtVal
            },
            //选中事件
            choose(index){
                let self =this
                if(self.editor == false){
                    if(self.infoFlag==false && self.id !=''){
                        return false  //禁止点击

                    }else if(self.infoFlag==true){
                        this.isActive = index
                    }
                }
                self.isActive = index
            },
        }
    }
 </script>
<style scoped>
.is-dark:hover{
    top: 430px;
}
    .el-form-item>>>.el-input__inner {
        width: 248px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
    }
    .el-form-item>>>textarea {
        height: 200px;
        resize: none;
        width: 800px;
    }
    .el-form-item>>>.el-form-item__content{
        height: auto;
    }
    .el-select>>>.el-input__icon{
        line-height: 25px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .jx-content{
        margin:  20px auto;
        position: relative;
    }
    .repeatInfo{
        position: absolute;
        right: 30px;
        top: 30px;
        .tips-name{
            clear:both;
            padding-top:18px;
            color:#1277eb
        }

    }
    .footer{
        text-align: center;
        margin-top: 44px;
        margin-bottom: 20px
    }
    .saveBtn{
        padding: 0;
        width: 90px;
        height: 32px;
    }
    .label{
        padding: 0 12px 0 10px;
        float: left;
    }
    .tap{
        height: 90px;
        width: 804px;
        margin: 20px 0 40px 10px;
        padding: 0 17px;
        position: relative;
        float: left;
        .leftArrow,.rightArrow{
            top: 49px;
            font-size: 16px;
            color: #727272;
            z-index: 1;
            display: inline-block;
            position: absolute;
            cursor: pointer;
        }
        .leftArrow{
            left: 0;

        }
        .rightArrow{
            right: 0;
        }
        .tapBox{
            height: 105px;
            width: auto;
            overflow: hidden;
            position: relative;
            ul{
                position: absolute;
                left: 0;
                top: 0;
            }
            li{
                width: 167px;
                height: 90px;
                background: #485877;
                float: left;
                margin: 5px 17px;
                color: #ffffff;
                border-radius:5px;
                position: relative;
                cursor: pointer;
                transition: transform .3s;
                .icons{
                    bottom: 7px;
                    right: 10px;
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    background: url(./../../../assets/images/right.png) no-repeat;
                }
                &:hover{
                   // box-shadow: 0 2px 20px #beb7b7;
                    transition: transform .3s;
                    transform: scale(1.05);
                }
                img{
                    width: 140px;
                    position: relative;
                    left: 50%;
                    top: 50%;
                    margin-left: -70px;
                    margin-top: -40px
                }
            }

        }
    }
</style>
